<script setup lang="ts">
  import { ref } from 'vue'
  const props = defineProps({
    title:{
      type:String
    },
    placeholder:{
      type:Boolean,
      default:true
    },
    contact:{
      type:Boolean,
      default:true
    }

  })
  // #ifndef H5
  const { height,width } = uni.getMenuButtonBoundingClientRect()
  // #endif

  // #ifdef H5
  const height = 28
  const width = 75
  // #endif
  const placeholder = ref(props.placeholder)
  const title = ref(props.title)
  const backHome = () => {
    uni.switchTab({url:'/pages/index/index'})
  }
  const backClick = () => {
    const pages = getCurrentPages()
    if(pages.length > 1){
      uni.navigateBack({
        delta:1
      })
    }else{
      uni.switchTab({url:'/pages/index/index'})
    }
  }
</script>

<template>
  <up-navbar
    :placeholder="placeholder"
    :border="placeholder"
    :title="title"
    :bgColor="placeholder?'#ffffff':'transparent'"
    :titleStyle="{
      fontSize:'14px',
      fontWeight:'500'
    }">
    <template #left>
      <view
        class="u-nav-slot"
        :class="{'u-nav-custom':!placeholder}"
        :style="{height:`${height}px`,width:`${width}px`}"
      >
        <up-icon
          name="arrow-left"
          size="20"
          color="#000000"
          @click="backClick"
        ></up-icon>
        <up-line
          direction="column"
          :hairline="false"
          color="#000000"
          length="16"
          margin="0 8px"
        ></up-line>
        <up-icon
          name="home"
          size="21"
          color="#000000"
          @click="backHome"
        ></up-icon>
      </view>
    </template>
  </up-navbar>
  <!-- <xx-movable-area v-if="contact"/> -->
</template>

<style scoped lang="scss">
.u-nav-slot{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  border-radius: 200rpx;
  padding: 0 19rpx;
  opacity: .9;
  border: 1rpx solid #dadbde;
  box-sizing: border-box;
  &.u-nav-custom{
    background: rgba(255,255,255,.9);
  }
}
</style>
